<template>
  <div class="space-y-6 mx-4 md:mx-8">
    <!-- Content Filter -->
    <ContentFilter
      :contentFilter="contentFilter"
      :searchQuery="props.searchQuery"
      @filter-change="$emit('filter-change', $event)"
      @search="$emit('search', $event)"
      @search-input="$emit('search-input', $event)"
    />

    <!-- 文章列表 -->
     <div v-for="article in filteredPosts" :key="article.id" style="margin-bottom: 32px;margin-top: 32px;">

       <ArticleItem
      :article="article"
      @click="handleArticleClick"
      :article-id="selectedArticleId"
      @star-toggle="handleStarToggle"
      @read-more="handleReadMore"
    />
     </div>
    <!-- 分页 -->
    <!-- <div class="mt-12 flex justify-center">
      <a-pagination
        :current="currentPage"
        :page-size="pageSize"
        :total="totalItems"
        @change="$emit('page-change', $event)"
        show-size-changer
        :page-size-options="['10', '20', '50']"
        show-quick-jumper
        :show-total="(total, range) => `第 ${range[0]}-${range[1]} 条，共 ${total} 条`"
      />
    </div> -->
    <!-- 文章详情弹窗 -->
    <ArticleDetail
      v-model:visible="showDetail"
      :article-id="selectedArticleId"
      
      @star-toggle="handleStarToggle"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, computed } from 'vue'
import ContentFilter from './ContentFilter.vue'
import ArticleItem from './ArticleItem.vue'
import ArticleDetail from './ArticleDetail.vue'
// 引入战队的状态机
import { useTeamStore } from '@/stores/teamStore'
import { storeToRefs } from 'pinia'
const teamStore = useTeamStore()
const { teamDetails } = storeToRefs(teamStore)
//文章的状态机
import { usePostStore } from '@/stores/postStore'
const postStore = usePostStore()
const { postList, total } = storeToRefs(postStore)

const props = defineProps({
  searchQuery: {
    type: String,
    default: ''
  }
})

const filteredPosts = computed(() => {
  if (!props.searchQuery) return postList.value
  const keyword = props.searchQuery.toLowerCase()
  return postList.value.filter(article =>
    (article.title || '').toLowerCase().includes(keyword)
  )
})


onMounted(() => {
  // 初始化文章列表
})




const emit = defineEmits(['page-change', 'star-toggle', 'filter-change', 'search', 'search-input'])

const showDetail = ref(false)
const selectedArticleId = ref<number | null>(null)

const handleArticleClick = (articleId: number) => {
  selectedArticleId.value = articleId
  showDetail.value = true
}

const handleStarToggle = (articleId: number) => {
  // 触发收藏逻辑
}

const handleReadMore = (articleId: number) => {
  handleArticleClick(articleId)
}
</script>

<style scoped>
/* 分页样式优化 */
:deep(.ant-pagination) {
  text-align: center;
}

:deep(.ant-pagination-item) {
  border-radius: 6px;
}

:deep(.ant-pagination-item-active) {
  border-color: #FF424D;
}

:deep(.ant-pagination-item-active a) {
  color: #FF424D;
}

:deep(.ant-pagination-next):hover,
:deep(.ant-pagination-prev):hover {
  border-color: #FF424D;
}

:deep(.ant-pagination-next):hover a,
:deep(.ant-pagination-prev):hover a {
  color: #FF424D;
}
</style>
